<template lang="pug">
  v-data-table( :headers="headers"
    v-model="selected"
    show-select
    :options.sync="options"
    :items="items"
    loading-text="数据加载中..."
    no-data-text="未找到数据"
    :server-items-length="totalItems"
    :footer-props="footerProps"
    :loading="isLoading"
  )
    template(v-slot:item.name='{ item }')
      span {{ getName(item) }}
    template(v-slot:item.bundleable_type='{ item }')
      span {{ getType(item) }}
</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import {mapActions} from 'vuex'
  import mixins from '../mixins/PaginateDataTableMixin'
  import {AxiosPromise} from 'axios'
  export default (Vue as VueConstructor<Vue & {

  }>).extend({
    mixins: [mixins],
    props: ['bundle'],
    methods: {
      ...mapActions("assetBundle", {fetchBundleItems: "fetchBundleItems"}),
      getName(item: any) {
        return item.bundleable.name
      },
      getType(item: any){
        return item.bundleable_type == "App\\Models\\AssetStock" ? "批量资产" : "一般资产"
      },
      fetchData(opt: any): AxiosPromise{
        let payload = {
          id: this.bundle.id,
          data: opt
        }
        return this.fetchBundleItems(payload)
      },
    },
    watch: {
      bundle(){
        this.refresh()
      },
    },
    data(){
      return {
        headers: [
          {text: '名称', value: 'name'},
          {text: '类型', value: 'bundleable_type'}
          ]
      }
    }
  })
</script>
